<template>
  <div>
    <el-tree
      ref="tree"
      :data="tableData"
      show-checkbox
      node-key="id"
      :default-expanded-keys="[2, 3]"
      :default-checked-keys="defaultKeys"
      :props="defaultProps"
      default-expand-all
      check-strictly
    />
    <div style="text-align:center;">
      <el-button size="small" @click="hCancel">取消</el-button>
      <el-button size="small" type="primary" @click="hSubmit">确定</el-button>
    </div>
  </div>
</template>
<script>
import { getPermissionList } from '@/api/permission'
import { transArray } from '@/utils'
import { getRoleDetail, assignPerm } from '@/api/settings'
export default {
  name: 'AssignPermission',
  data() {
    return {
      tableData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      id: '',
      defaultKeys: []
    }
  },
  computed: {
  },
  created() {
    this.loadPermissions()
  },
  methods: {
    async loadPermissions() {
      const res = await getPermissionList()
      this.tableData = transArray(res.data)
      this.loadRoleDetail()
    },
    async loadRoleDetail() {
      const res = await getRoleDetail(this.id)
      console.log(res, 9999)
      this.defaultKeys = res.data.permIds
    },
    async hSubmit() {
      const permIds = this.$refs.tree.getCheckedKeys()
      const res = await assignPerm({
        id: this.id,
        permIds
      })
      this.$emit('close')
    }
  }
}
</script>
<style lang='less'  scoped>

</style>
